<template>
	<z-paging ref="paging" class="containerbox" v-model="list" @query="querylist" empty-view-text="暂无订阅额度~">
		<template #loading>
			<view style="opacity: 0">
				<view class="m-30">
					<view class="text-30 mb-20">订阅消息通知</view>
					<view class="text-24 tip-color before">当次数为0时，你不会收到对应的微信服务通知</view>
					<view class="text-24 tip-color before my-10">若增加/开启订阅未生效，可尝试下拉刷新</view>
				</view>
			</view>
			
			<dw_loading :status="loading" class="my-auto" />
		</template>
		
		<template #top>
			<uv-navbar title="订阅消息额度" auto-back placeholder />
			
			<view class="m-30">
				<view class="text-30 mb-20">订阅消息通知</view>
				<view class="text-24 tip-color before">当次数为0时，你不会收到对应的微信服务通知</view>
				<view class="text-24 tip-color before my-10">若增加/开启订阅未生效，可尝试下拉刷新</view>
			</view>
			
			<view class="h-30" />
		</template>
		
		<view class="containerbox">
			<view class="flex-between mx-30 mt-30 border-bottom pb-30" v-if="list[0]">
				<view class="flex-1">
					<view class="">
						<text class="text-28">开课提醒</text>
						<text class="font-700 ml-20" :class="{ 'font-red': list[0]['subscribeNumber'] <= 0 }">{{ list[0]['subscribeNumber'] }}次</text>
					</view>
					<view class="u-line-1 text-24 tip-color mt-15">开始提醒、课程通知</view>
				</view>
				
				<view class="subscribe-btn flex-center round-10 text-26" @tap="subscribe(list[0])">订阅+1</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	
	import { ref } from 'vue'
	import { bindWechat, templatelist, templateSubscribe } from '@/common/apis/other'
	import { getuserInfo } from '@/common/apis/account'
	
	let loading = ref(true)
	let list = ref([])
	let paging = ref()
	
	async function querylist(page, pageSize) {
		let params = { page, pageSize, simplePage: 1 }
		let list = await templatelist(params)
		uni.$fui.sleep(() => {
			loading.value = false
			paging.value.complete(list)
		})
	}
	
	async function subTemplateSubscribe(item) {
		await templateSubscribe()
		item.subscribeNumber++
		uni.$fui.toast('订阅成功')
	}
	
	function fail() {
		uni.hideLoading()
		uni.$fui.toast('订阅失败')
	}
	
	async function subscribe(item) {
		uni.showLoading({ title: '订阅中~' })
		uni.requestSubscribeMessage({
			tmplIds: [item.miniappTemplate],
			fail,
			success: async function(result) {
				if (result.errMsg === 'requestSubscribeMessage:ok') {
					if (result[item.miniappTemplate] === 'accept') {
						const userInfo = await getuserInfo()
						if (userInfo?.authAccount?.isBindWechat) await subTemplateSubscribe(item)
						else {
							uni.login({
								fail,
								success: async function({ code }) {
									await bindWechat({ code })
									await subTemplateSubscribe(item)
								}
							})
						}
					}
					
					if (result[item.miniappTemplate] === 'ban') uni.$fui.toast('已被后台封禁')
					
					if (result[item.miniappTemplate] === 'reject') {
						uni.hideLoading()
						uni.$fui.modal({ 
							content: '已拒绝接受此类通知，需点击右上角省略号-设置-通知管理，设置接受与不接受开课提醒通知~',
							confirmText: '我知道了'
						})
					}
				}
			}
		})
	}
	
</script>

<style>page{background-color: #fff}</style>
<style scoped lang="scss">
	.tip-color{color: $qgray}
	.before::before{width: 6rpx;height: 6rpx;border-radius: 100%;background-color: $qgray;content: '';display: inline-block;transform: translate(-50%, -50%);margin: 0 20rpx}
	.h-30{background-color: #f8f8f8}
	.subscribe-btn{border: 1px solid $primary;color: $primary;width: 130rpx;height: 60rpx}
	.font-red{color: $red}
</style>